<template>
  <el-cascader style="width: 100%"
               :options="categories"
               @active-item-change="handleItemChange"
               :props="attr"
               :clearable="true"
               class="district"
               placeholder="请选择分类"
               :value="value"
               @change="change"
  >
  </el-cascader>
</template>
<script>
  import AdminService from 'src/service/admin'
  import emitter from 'src/components/emitter'

  export default {
    name: 'HGoodCategoryChooseChoose',
    mixins: [emitter],
    data() {
      return {
        categories: []
      }
    },
    props: {
      value: {
        type: Array,
        default: null
      },
      attr: {
        type: Object,
        default: function () {
          return {
            value: 'id',
            label: 'name'
          }
        }
      }
    },
    watch: {
      value: async function (newVal, oldVal) {

        if (newVal == null)
          return
        const length = newVal.length
        let parentObject = {
          'id': 0,
          'children': this.categories
        }
        let i = 0;
        for (; i < length; i++) {
          const datas = parentObject['children'].filter(data => {
            return data.id === newVal[i]
          })
          if (datas != null && datas.length > 0) {
            parentObject = datas[0]
          } else {
            if (i > 0) {
              parentObject['children'] = await this.getChildren(newVal[i - 1])
              i--
            }
          }
        }
      }
    },
    methods: {
      change: function (data) {
        const names = this.getNames(data)
        this.$emit('input', data)
        this.$emit('change', {
          'ids': data,
          'names': names
        })
        this.dispatch('ElFormItem', 'el.form.change', [data])
      },
      handleItemChange: function (val) {
        const me = this
        const length = val.length
        let parentObject = {
          'children': me.categories
        }
        for (let i = 0; i < length; i++) {
          parentObject = parentObject['children'].filter(data => {
            return data.id === val[i]
          })
          if (parentObject != null) {
            parentObject = parentObject[0]
          }
        }
        //当上级节点存在时处理子节点
        if (parentObject != null) {
          AdminService.goodCategory(parentObject.id).then(function (datas) {
            if (datas != null) {
              parentObject['children'] = datas.datas.map(data => {
                if (data['childNum'] > 0) {
                  data['children'] = []
                }
                return data
              })
            }
          })
        }
      },
      getChildren: async function (id) {
        let datas = await  AdminService.goodCategory(id)
        if (datas != null) {
          return datas.datas.map(data => {
            if (data['childNum'] > 0) {
              data['children'] = []
            } else {
              data['children'] = null
            }
            return data
          })
        }
        return null
      },
      getNames: function (ids) {
        const names = []
        let parentObject = {
          'children': this.categories
        }
        const length = ids.length
        for (let i = 0; i < length; i++) {
          parentObject = parentObject.children.filter(data => {
            return data.id === ids[i]
          })
          if (parentObject != null) {
            parentObject = parentObject[0]
            names.push(parentObject.name)
          }
        }
        return names
      },
      getDatas: async function () {
        const me = this
        let datas = await this.getChildren(0)
        me.categories = datas
        if (me.value != null && me.value.length > 1 && datas != null) {
          let parentObject = {
            'id': 0,
            'children': datas
          }
          for (let i = 0; i < me.value.length - 1; i++) {
            if (parentObject == null) {
              break
            }
            const id = me.value[i]
            const datas = parentObject['children'].filter(data => {
              return data.id === id
            })
            if (datas != null) {
              parentObject = datas[0]
              if (parentObject['childNum'] > 0) {
                parentObject['children'] = await this.getChildren(parentObject.id)
              }
            }
          }
        }
      }
    },
    mounted: function () {
      this.getDatas()
    }
  }
</script>

